<template>
  <div class="flex flex-row items-center border-b-[0.2rem] border-[#e8e8e8] my-[0.2rem]" @click="click">
      <van-image :src="icon" class="flex-[1.5] mr-[0.5rem] shadow-md rounded-[10%]" fit="contain"></van-image>

    <div class="flex-[2]">
      <div class="text-center">
        <span class="text-sm inline-block overflow-hidden text-ellipsis whitespace-nowrap">{{ title }}</span><br/>
        <span class="text-xs">{{ author }}</span>
      </div>
      <div class="leading-[1.2rem] overflow-hidden text-ellipsis line-clamp-6">
        <p>{{ desc }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BookComponent",
  data() {
    return {}

  },
  props: {
    "bookId": {
      type: Number,
      default: 0
    },
    "icon": {
      type: String,
      default: 'https://www.xbiquge.la/files/article/image/10/10489/10489s.jpg'
    },
    "title": {
      type: String,
      default: '三寸人间'
    },
    "author": {
      type: String,
      default: '耳根'

    },
    "desc": {
      type: String,
      default: '东方神州，有人皇立道统，有圣贤宗门传道，有诸侯雄踞一方王国，诸强林立，神州动乱千万载，执此之时，一代天骄叶青帝及东凰大帝横空出世，斩人皇，驭圣贤，诸侯臣服，东方神州一统！    然，叶青帝忽然暴毙，世间雕像尽皆被毁，于世间除名，沦为禁忌；从此神州唯东凰大帝独尊！    十五年后，东海青州城，一名为叶伏天的少年，开启了他的传奇之路…'
    }
  },
  methods: {
    click() {
      this.$emit('bookClick', this.bookId)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
